<!--数据统计界面-->
<script setup>
import { ref, onMounted } from 'vue'
import { useAdminStore } from '../../store/admin'
import { ElCard, ElRow, ElCol, ElStatistic, ElProgress } from 'element-plus'
import * as echarts from 'echarts'

const adminStore = useAdminStore()

const statistics = ref({})
const loading = ref(false)

// 获取统计数据
const fetchStatistics = async () => {
  loading.value = true
  try {
    statistics.value = await adminStore.fetchStatistics()
  } catch (error) {
    console.error('获取统计数据失败:', error)
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  fetchStatistics()
})
</script>

<template>
  <div class="statistics" v-loading="loading">
    <h2>数据统计</h2>

    <el-row :gutter="20" class="stats-cards">
      <el-col :span="6">
        <el-card>
          <el-statistic title="总用户数" :value="statistics.totalUsers || 0" />
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <el-statistic title="学生数" :value="statistics.totalStudents || 0" />
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <el-statistic title="教师数" :value="statistics.totalTeachers || 0" />
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <el-statistic title="企业数" :value="statistics.totalCompanies || 0" />
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="stats-cards">
      <el-col :span="6">
        <el-card>
          <el-statistic title="实习岗位数" :value="statistics.totalPositions || 0" />
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <el-statistic title="实习申请数" :value="statistics.totalApplications || 0" />
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <el-statistic title="实习材料数" :value="statistics.totalMaterials || 0" />
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <el-statistic title="待审核企业" :value="statistics.pendingCompanies || 0" />
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="progress-section">
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>用户角色分布</span>
            </div>
          </template>
          <div class="progress-item">
            <span>学生</span>
            <el-progress
              :percentage="(statistics.totalStudents / statistics.totalUsers * 100) || 0"
              :format="() => `${statistics.totalStudents || 0}人`"
            />
          </div>
          <div class="progress-item">
            <span>教师</span>
            <el-progress
              :percentage="(statistics.totalTeachers / statistics.totalUsers * 100) || 0"
              :format="() => `${statistics.totalTeachers || 0}人`"
              status="success"
            />
          </div>
          <div class="progress-item">
            <span>企业</span>
            <el-progress
              :percentage="(statistics.totalCompanies / statistics.totalUsers * 100) || 0"
              :format="() => `${statistics.totalCompanies || 0}家`"
              status="warning"
            />
          </div>
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>实习状态统计</span>
            </div>
          </template>
          <div class="progress-item">
            <span>未开始</span>
            <el-progress
              :percentage="(statistics.notStartedInternships / statistics.totalInternships * 100) || 0"
              :format="() => `${statistics.notStartedInternships || 0}个`"
            />
          </div>
          <div class="progress-item">
            <span>进行中</span>
            <el-progress
              :percentage="(statistics.ongoingInternships / statistics.totalInternships * 100) || 0"
              :format="() => `${statistics.ongoingInternships || 0}个`"
              status="success"
            />
          </div>
          <div class="progress-item">
            <span>已完成</span>
            <el-progress
              :percentage="(statistics.completedInternships / statistics.totalInternships * 100) || 0"
              :format="() => `${statistics.completedInternships || 0}个`"
              status="warning"
            />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.statistics {
  padding: 20px;
}

.stats-cards {
  margin-bottom: 20px;
}

.progress-section {
  margin-top: 20px;
}

.progress-item {
  margin-bottom: 15px;
}

.progress-item span {
  display: inline-block;
  width: 80px;
  margin-right: 10px;
}
</style>
